<template>
<view class="works" :style="{ 'background-image': `url(${iamge})` }">
    <view  class="works-docker">
        <view class="works-image">
            <image :src="iamge"></image>
        </view>
        <view class="works-content">
            <view class="content-title">{{title}}
                <!-- #ifdef H5 -->
                <fui-icon @click="deleteItem" size="43" name="clear"></fui-icon>
                <!-- #endif -->
            </view>
            <view class="content-info">{{info}}</view>
            <view class="c-b">
                <view class="red">{{red}}人已测</view> <view @click="toSelect" class="works-to">立即查询</view>
            </view>
        </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import playingStore from '@/store/playing';
import dyUserPlayingService from "@/api/dyUserPlayingService";
const playing = playingStore()
interface IProps {
    title: string
    info: string
    iamge:string
    url:string
    inUser:boolean
    id:string
    red:number
    deleteItem?:Function
}

const props = withDefaults(defineProps<IProps>(), {})

const deleteItem = (item:any)=>{
    props.deleteItem && props.deleteItem(props.id)
}

const toSelect = ()=>{
    playing.inUser = props.inUser
    playing.playingId =  props.id
    if(props.id && playing.userId){
        // 预估数据
        dyUserPlayingService.useEstimate({
            playingId:Number(props.id),
            userId:Number(playing.userId)
        })
    }

    uni.navigateTo({
        url:props.url
  }) 
}

</script>

<style lang="scss" scoped>
.works{
    color: white;
    font-size: 28rpx;
    border-radius: 20rpx;
    margin-bottom: 23rpx;
    background-blend-mode: multiply;
    background-color: rgba(17,23,29,.5); 
    .works-docker{
        padding: 25rpx;
        display: flex;
        border-radius: 20rpx;
        align-items: center;


        backdrop-filter: blur(15px); /* 背景模糊 */
        -webkit-backdrop-filter: blur(15px); /* 兼容老版本 Safari */
    }
    .works-image{
        width: 150rpx;
        height: 150rpx;
        image{
            width: 100%;
            height: 100%;
            border-radius: 20rpx;
        }
    }
    .works-content{
        margin:0 20rpx;
        width: 72%;
        .content-title{
            font-weight: bolder;
            font-size: 32rpx;
            display: flex;
            align-items: center;
            justify-content: space-between
        }
        .content-info{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .c-b{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .works-to{
                background: linear-gradient(to right, #ffffff, rgb(192, 240, 254));
                color: black;
                padding: 10rpx 30rpx;
                border-radius: 28rpx;
                margin-right: 0;
            }
        }
    }
    .works-content view{
        margin: 10rpx;
    }
    
}
</style>
